<template>
	<view class="container">
		<view class="avatar-box" @click="afterRead">
			<u-avatar v-if="formData.avatar" :src="formData.avatar"></u-avatar>
			<!-- camera -->
			<u-icon name="camera" color="#fff" size="28"></u-icon>
			<!-- :deletable="false"  -->
			<!-- <u-upload width="98" :deletable="false" height="98" multiple :fileList="fileList" @afterRead="afterRead"
				@delete="deletePic" name="1" :maxCount="1">
				<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
					style="width: 250px;height: 150px;"></image>
			</u-upload> -->
			<!-- <image style="width: 100%;height: 100%;" :src="formData.avatar" mode=""></image> -->
		</view>
		<view class="info-list">
			<view class="info-cell">
				<view class="cell-label">姓名</view>
				<view class="cell-ipt">
					<u--input placeholderClass="plach" placeholder="请输入" border="none" v-model="formData.nickname">
					</u--input>
				</view>
			</view>
			<view class="info-cell">
				<view class="cell-label">手机号</view>
				<view class="cell-ipt">
					<u--input type="number" maxlength="11" placeholderClass="plach" placeholder="请输入" border="none"
						v-model="formData.phone"></u--input>
				</view>
			</view>
			<view class="info-cell" @click="showSheetSex = true">
				<view class="cell-label">性别</view>
				<view class="cell-ipt">
					<text class="plach" v-if="formData.sex === ''">请选择</text>
					<text class="" v-else>{{['男','女'][formData.sex]}}</text>
				</view>
			</view>
			<view class="info-cell" @click="datetimePickershow = true">
				<view class="cell-label">生日</view>
				<view class="cell-ipt">
					<text class="plach" v-if="formData.birthday == ''">请选择</text>
					<text v-else>{{formData.birthday}}</text>
				</view>
			</view>
			<view class="info-cell" @click="showSheetProvinces=true">
				<view class="cell-label">所在城市</view>
				<view class="cell-ipt">
					<text class="plach" v-if="formData.city == ''">请选择</text>
					<text v-else>{{formData.city}}</text>
				</view>
			</view>
			<!-- <view class="info-cell">
				<view class="cell-label">我的宠物</view>
				<view class="cell-ipt">
					<u--input placeholderStyle="color: rgba(0, 0, 0, 0.40);font-size: 32rpx;" placeholder="请输入"
						border="none" v-model="value"></u--input>
				</view>
			</view> -->
			<view class="info-cell">
				<view class="cell-label">我的简介</view>
				<view class="cell-ipt">
					<u--input placeholderStyle="color: rgba(0, 0, 0, 0.40);font-size: 32rpx;" placeholder="请输入"
						border="none" v-model="formData.intro"></u--input>
				</view>
			</view>
		</view>
		<cu-button-wrap>
			<u-button :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="保存"
				@click="onSaveInfo"></u-button>
		</cu-button-wrap>
		<!-- 选择省市 -->
		<u-picker :defaultIndex="defaultIndex" @cancel="showSheetProvinces = false" :show="showSheetProvinces"
			:columns="provincesList" @confirm="onActionSheetProvinces"></u-picker>

		<!-- 选择性别 -->
		<u-action-sheet @close="showSheetSex = false" @select="onActionSheet" round="24" cancelText="取消"
			:actions="sheetSexList" :show="showSheetSex">
		</u-action-sheet>
		<!-- 年月日 -->
		<u-datetime-picker :minDate="minDate" :maxDate="maxDate" @confirm="onDateTimeConfirm"
			@cancel="datetimePickershow = false" ref="datetimePicker" :formatter="formatter" :show="datetimePickershow"
			v-model="formMonthYear" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		data() {
			return {
				minDate: new Date("1924/01/01").getTime(),
				maxDate: new Date().getTime(),
				showSheetProvinces: false,
				defaultIndex: [0],
				provincesList: [
					["北京市", "天津市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省",
						"江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省",
						"西藏自治区",
						"陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区"
					]
				],
				fileList: [], //
				formMonthYear: Number(new Date()), //Number(new Date())
				sheetSexList: [{
						name: '男',
						id: 0,
						color: '#000000',
						fontSize: '17'
					},
					{
						name: '女',
						id: 1,
						color: '#000000',
						fontSize: '17'
					}
				],
				formData: {
					phone: '',
					avatar: '',
					nickname: '',
					city: '',
					sex: '', //0 男 1女
					intro: '',
					birthday: ''
				},
				showSheetSex: false,
				datetimePickershow: false
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			// 选择省市
			onActionSheetProvinces(e) {
				this.formData.city = e.value[0];
				this.showSheetProvinces = false;
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let _this = this;
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: async (res) => {
						console.log(res.tempFilePaths);
						const result = await this.$Net.upload(res.tempFilePaths[0], 1)
						if (result.status != 200) {
							_this.$Msg.Toast('上传失败:' + result.msg)
							return
						}
						console.log(result);
						// 返回选定照片的本地文件路径列表 tempFilePaths
						_this.formData.avatar = result.data.url
					},
					fail: (err) => {
						// 处理错误情况
						_this.$Msg.Toast(err)
						console.error(err);
					}
				});
			},
			// 用户详情
			getUserInfo() {
				this.$Net.get(this.$api.user_info, {}, 1).then(res => {
					console.log('res', res);
					const {
						avatar,
						nickname,
						city,
						sex,
						intro,
						birthday,
						phone
					} = res
					this.formData = {
						avatar,
						nickname,
						phone,
						city,
						sex,
						intro,
						birthday
					}
					this.fileList = [{
						status: 'success',
						message: '',
						url: avatar
					}]
					if (this.formData.city) {
						this.defaultIndex = [this.provincesList[0].indexOf(this.formData.city) || 0];
					}
				})
			},
			// 生日确定
			onDateTimeConfirm(e) {
				this.formMonthYear = e.value;
				this.formData.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.datetimePickershow = false;
			},
			// 保存
			onSaveInfo() {
				console.log(this.formData);
				this.$Net.post(this.$api.user_edit, this.formData, 1).then(res => {
					this.$Msg.Toast(res.msg)
					console.log(res);
				})
			},
			// 选择性别
			onActionSheet(e) {
				this.formData.sex = e.id;
				this.showSheetSex = false;
				console.log('---', e);
			},
			// 格式化生日
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.avatar-box {
			width: 98px;
			height: 98px;
			border-radius: 98px;
			background: #F1F1F1;
			margin: 40rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			::v-deep .u-avatar__image,
			::v-deep .u-avatar {
				width: 98px !important;
				height: 98px !important;
				position: relative;
				z-index: 2;
			}

			::v-deep .u-icon {
				position: absolute;
				z-index: 3;
			}

			// overflow: hidden;
		}

		.info-list {
			margin-top: 40rpx;

			.info-cell {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.cell-label {
					color: rgba(0, 0, 0, 0.60);
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 40rpx;
					width: 128rpx;
				}

				::v-deep .u-input {
					padding: 0 !important;
					font-size: 32rpx;
				}

				.cell-ipt {
					font-size: 32rpx;
				}

				/deep/ .plach {
					color: rgba(0, 0, 0, 0.40);
					font-size: 32rpx;
				}
			}
		}
	}
</style>
